<template>
  <div>
    <n-modal v-model:show="showModal" :mask-closable="false">
       <div class="modal-wrapper">
        <div class="modal-wrapper-header">
          <div style="width: 3rem;"></div>
          <div class="title">&nbsp;</div>
          <div style="width: 3rem; margin-right: 1.7rem; margin-top: 0.7rem;" @click="close">
            <img src="/src/assets/login/UI_Common_Btn_Close.png" style="width: 3.5rem; height: auto; display: block;" />
          </div>
        </div>
        <div class="modal-wrapper-content">
          <n-grid :x-gap="5" :y-gap="10" :cols="24" layout-shift-disabled>
            <n-gi :span="6">
              <div class="date-item date-1 signed">
                <n-image
                  :preview-disabled="true"
                  width="80"
                  :src="icon2"
                />
                <div class="coin">
                  <strong>x200</strong>
                </div>
                <div class="checked">
                  <n-image
                    :preview-disabled="true"
                    width="40"
                    :src="gou"
                  />
                </div>
              </div>
            </n-gi>
            <n-gi :span="6">
              <div class="date-item date-2">
                <n-image
                  :preview-disabled="true"
                  width="80"
                  :src="icon2"
                />
                <div class="coin">
                  <strong>x200</strong>
                </div>
              </div>
            </n-gi>
            <n-gi :span="6">
              <div class="date-item date-3">
                <n-image
                  :preview-disabled="true"
                  width="80"
                  :src="icon2"
                />
                <div class="coin">
                  <strong>x200</strong>
                </div>
              </div>
            </n-gi>
            <n-gi :span="6">
              <div class="date-item date-4">
                <n-image
                  :preview-disabled="true"
                  width="80"
                  :src="icon2"
                />
                <div class="coin">
                  <strong>x200</strong>
                </div>
              </div>
            </n-gi>
            <n-gi :span="6">
              <div class="date-item date-5">
                <n-image
                  :preview-disabled="true"
                  width="80"
                  :src="icon2"
                />
                <div class="coin">
                  <strong>x200</strong>
                </div>
              </div>
            </n-gi>
            <n-gi :span="9">
              <div class="date-item date-6">
                <n-image
                  :preview-disabled="true"
                  width="80"
                  :src="icon1"
                />
                <div class="coin">
                  <strong>x400</strong>
                </div>
              </div>
            </n-gi>
            <n-gi :span="9">
              <div class="date-item date-7">
                <n-image
                  :preview-disabled="true"
                  width="80"
                  :src="icon1"
                />
                <div class="coin">
                  <strong>x400</strong>
                </div>
              </div>
            </n-gi>
          </n-grid>
          <div class="footer bg1">
            <div class="content">连续签到7日</div>
          </div>
        </div>
       </div>
    </n-modal>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import icon1 from '@/assets/singn/icon1.png'
import icon2 from '@/assets/singn/icon2.png'
import gou from '@/assets/singn/Sign_Icon_gou.png'

const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})

const showModal = ref(false)

function show() {
  showModal.value = true
}

function close() {
  showModal.value = false
}

defineExpose({
  show,
  close
})
</script>

<style lang="scss" scoped>
.modal-wrapper {
  width: 43rem;
  height: 48rem;
  background: url('/src/assets/singn/Sign_bg.png');
  background-size: 100% 100%;
  position: relative;

  &-header {
    height: 6rem;
    width: 100%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &::before {
    content: "";
    position: absolute;
    width: 18rem;
    height: 8rem;
    background: url('/src/assets/singn/Sign_zi_CN.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    z-index: 999;
    left: 3rem;
    top: -2.8rem;
  }

  &-content {
    padding: 20px;
  }
}

.date-item {
  width: 100%;
  height: 12rem;
  background: #fffcee;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 20px;
  box-sizing: border-box;
  z-index: 1;

  &.date-1, &.date-2, &.date-3, &.date-4, &.date-5 {
    border-radius: 10px;
  }
  &.date-6, &.date-7 {
    border-radius: 10px 0 10px 10px;
  }

  .coin {
    width: 100%;
    text-align: right;
    margin-top: -20px;
    padding-right: 10px;
  }

  .checked {
    display: none;
  }

  &::after {
    position: absolute;
    content: "";
    left: -2px;
    top: -7px;
    right: 0;
    height: 8rem;
    z-index: 3;
  }

  &.date-1::after {
    background: url('/src/assets/singn/1.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  &.date-2::after {
    background: url('/src/assets/singn/2.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  &.date-3::after {
    background: url('/src/assets/singn/3.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  &.date-4::after {
    background: url('/src/assets/singn/4.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  &.date-5::after {
    background: url('/src/assets/singn/5.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  &.date-6::after {
    background: url('/src/assets/singn/6.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  &.date-7::after {
    background: url('/src/assets/singn/7.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
  }

  &.signed {
    .checked {
      display: block !important;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 5;
    }

    &::before {
      position: absolute;
      z-index: 2;
      content: '';
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0,0,0,0.2);
      border-radius: 12px;
    }
  }
}

.footer {
  width: 100%; 
  height: 12rem;

  &.bg1 {
    background: url('/src/assets/singn/Reward_Null.png');
    background-size: 105% auto;
    background-repeat: no-repeat;
    background-position: -8px 0;
  }
  &.bg2 {
    background: url('src/assets/singn/Reward_On.png');
    background-size: 105% auto;
    background-repeat: no-repeat;
    background-position: -8px 0;
    
  }

  .content {
    font-weight: bold;
    font-size: 2.2rem;
    line-height: 12rem;
    text-align: center;
    padding-left: 80px;

  }
}
</style>